import type { ProFormInstance } from '@ant-design/pro-components';
import { ProCard, StepsForm } from '@ant-design/pro-components';

import { useRef } from 'react';

import BasicInformation from './BasicInformation/BasicInformation';
import SettlementInformation from './SettlementInformation';
import Materialinformation from './Materialinformation';
import Productlaunch from './Productlaunch';

import style from './index.less';

// const waitTime = (time: number = 100) => {
//   return new Promise((resolve) => {
//     setTimeout(() => {
//       resolve(true);
//     }, time);
//   });
// };

const BasicLayout: React.FC = () => {
  const formRef = useRef<ProFormInstance>();

  return (
    <ProCard className={style.stepsForm}>
      <StepsForm<{
        name: string;
      }>
        formRef={formRef}
        onFinish={async () => {
          console.log('formRef2', formRef.current?.getFieldsValue());

          // message.success('提交成功');
        }}
        formProps={{
          validateMessages: {
            required: '此项为必填项',
          },
        }}
      >
        {/* 第一步 */}
        <StepsForm.StepForm<{
          name: string;
        }>
          name="base"
          layout={'horizontal'}
          title="基础信息"
          onFinish={async () => {
            console.log(formRef.current?.getFieldsValue());

            return true;
          }}
        >
          <BasicInformation />
        </StepsForm.StepForm>

        {/* 第二步 */}
        <StepsForm.StepForm<{
          checkbox: string;
        }>
          name="checkbox"
          title="结算信息"
          layout={'horizontal'}
          onFinish={async () => {
            console.log(formRef.current?.getFieldsValue());
            return true;
          }}
        >
          <SettlementInformation />
        </StepsForm.StepForm>

        {/* 第三步 */}
        <StepsForm.StepForm
          name="time"
          title="材料信息"
          layout={'horizontal'}
          onFinish={async () => {
            console.log(formRef.current?.getFieldsValue());
            return true;
          }}
        >
          <Materialinformation />
        </StepsForm.StepForm>

        {/* 第四步 */}
        <StepsForm.StepForm
          name="ass"
          title="产品开通"
          layout="horizontal"
          initialValues={{
            name1: '小费',
            name2: 'MOTO交易',
            name3: 'VISA收单-消费',
            name4: 'MASTERCARD收单-消费',
            name5: 'UNIONPAY收单-消费',
            name6: 'DINERSCLUB收单-消费',
            name7: 'JCB收单-消费',
            name8: '收单-预授权',
            tablexuanze3: 'Blended',
            tablexuanze4: 'Blended',
            tablexuanze5: 'Blended',
            tablexuanze6: 'Blended',
            tablexuanze7: 'Blended',
            ctvtype1: 'Blended',
            ctvtype2: 'Blended',
            ctvtype3: 'Blended',
            ctvname1: 'VISA线上消费',
            ctvname2: 'MASTERCARD线上消费',
            ctvname3: 'JCB线上消费',
            cnpname1: 'VISA线上消费',
            cnpname2: 'MASTERCARD线上消费',
            cnpname3: 'DINERSCLUB 线上消费',
            cnpname4: 'JCB线上消费',
            cnpname5: 'AMERICAEXPRESS 线上消费',
            cnpname6: 'UNIONPAY 线上消费',
            cnpname7: 'VISA TOKEN线上消费',
            cnpname8: 'MASTERCARD TOKEN线上消费',
            cnpname9: 'AMERICAEXPRESS TOKEN线上消费',
            cnpname10: 'UNIONPAY TOKEN线上消费',
            cnpname11: 'VISA TOKEN预授权',
            cnpname12: 'MASTERCARD TOKEN预授权',
            cnpname13: 'AMERICAEXPRESS TOKEN预授权',
            cnpname14: 'UNIONPAY TOKEN预授权',
            cnptype1: 'Blended',
            cnptype2: 'Blended',
            cnptype3: 'Blended ',
            cnptype4: 'Blended',
            cnptype5: 'Blended ',
            cnptype6: 'Blended ',
            cnptype7: 'Blended ',
            cnptype8: 'Blended ',
            cnptype9: 'Blended ',
            cnptype10: 'Blended ',
            cnptype11: 'Blended ',
            cnptype12: 'Blended ',
            cnptype13: 'Blended ',
            cnptype14: 'Blended ',

            saomaname1: '微信扫码-正扫',
            saomaname2: '微信刷卡-反扫',
            saomaname3: '微信APP支付',
            saomaname4: '微信小程序支付',
            saomaname5: '微信公众号支付 ',
            saomaname6: '微信公众号-服务商授权',
            saomaname7: '支付宝扫码-正扫',
            saomaname8: '支付宝刷卡-反扫',
            saomaname9: '支付宝H5支付 ',
            saomaname10: '支付宝APP支付 ',
            saomaname11: '支付宝WEB支付 ',
            saomaname12: '银联云闪付扫码-正扫',
            saomaname13: '银联云闪付刷卡-反扫',
            saomaname14: 'payNow扫码支付-正扫',
          }}
          onFinish={async () => {
            console.log('第四步', formRef.current?.getFieldsValue());
            return true;
          }}
        >
          <Productlaunch formRef={formRef} />
        </StepsForm.StepForm>
      </StepsForm>
    </ProCard>
  );
};

export default BasicLayout;
